<template>
    <div class="box-container" :class="[customClass]" v-bind="layoutProps" :style="boxStyle"
            :key="widget.id" v-show="!widget.options.hidden">
            {{widget.options.textAlign}}
        <template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
            <template v-for="(subWidget, swIdx) in widget.widgetList">
                <template v-if="'container' === subWidget.category">
                    <component :is="getComponentByContainer(subWidget)"
                               :widget="subWidget"
                               :key="swIdx"
                               :fatherData="fatherData"
                               :parent-list="widget.widgetList"
                               :index-of-parent-list="swIdx"
                               :parent-widget="widget">
                        <!-- 递归传递插槽！！！ -->
                        <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
                            <slot :name="slot" v-bind="scope"/>
                        </template>
                    </component>
                </template>
                <template v-else>
                    <component :is="subWidget.type + '-widget'"
                               :field="subWidget"
                               :designer="null"
                               :key="swIdx"
                               :parent-list="widget.widgetList"
                               :index-of-parent-list="swIdx"
                               :parent-widget="widget">
                        <!-- 递归传递插槽！！！ -->
                        <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
                            <slot :name="slot" v-bind="scope"/>
                        </template>
                    </component>
                </template>
            </template>
        </template>
    </div>
</template>

<script>
import emitter from '@/utils/emitter'
import i18n from "../../../utils/i18n"
import refMixin from "../refMixin"
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'

export default {
    name: "BoxContainerItem",
    componentName: 'BoxContainerItem',
    mixins: [emitter, i18n, refMixin],
    components: {
        ...FieldComponents,
    },
    props: {
        widget: Object,
        fatherData:Object,
        colHeight: {
            type: String,
            default: null
        },

    },
    inject: ['refList', 'globalModel', 'formConfig', 'previewState'],
    data() {
        return {
            layoutProps: {
                span: this.widget.options.span,
                md: this.widget.options.md || 12,
                sm: this.widget.options.sm || 12,
                xs: this.widget.options.xs || 12,
                offset: this.widget.options.offset || 0,
                push: this.widget.options.push || 0,
                pull: this.widget.options.pull || 0,
            }
        }
    },
    computed: {
        customClass() {
            return this.widget.options.customClass || ''
        },

        colHeightStyle() {
            const  textAlign=this.widget.options.initStyle.textAlign || 'left';
            const paramsData = {};
            if(this.colHeight ){
                paramsData = {height: this.colHeight + 'px'} 
            }
                paramsData['text-align']=textAlign;
            return paramsData
        },
        boxStyle() {
          const initStyle = this.widget.options.initStyle || {};
          if(!initStyle){
            return {}
          }
          const style = {
              width:initStyle.width && initStyle.width.indexOf('%') > -1 ? initStyle.width : initStyle.width + 'px',
              // height:initStyle.height&&initStyle.height.indexOf('%') > -1 ? initStyle.height : initStyle.height + 'px',
              minHeight:initStyle.minHeight&&initStyle.minHeight.indexOf('%') > -1 ? initStyle.height : initStyle.height + 'px',
              backgroundColor:initStyle.backgroundColor,
              color:initStyle.color,
              margin:initStyle.margin + 'px',
              padding:initStyle.padding + 'px',
              textAlign:initStyle.textAlign,
            }
            return style
        },

    },
    created() {
        this.initLayoutProps()
        this.initRefList()
    },
    methods: {
        initLayoutProps() {
            if (this.widget.options.responsive) {
                if (this.previewState) {
                    this.layoutProps.md = undefined
                    this.layoutProps.sm = undefined
                    this.layoutProps.xs = undefined

                    let lyType = this.formConfig.layoutType
                    if (lyType === 'H5') {
                        this.layoutProps.span = this.widget.options.xs || 12
                    } else if (lyType === 'Pad') {
                        this.layoutProps.span = this.widget.options.sm || 12
                    } else {
                        this.layoutProps.span = this.widget.options.md || 12
                    }
                } else {
                    this.layoutProps.span = undefined
                }
            } else {
                this.layoutProps.md = undefined
                this.layoutProps.sm = undefined
                this.layoutProps.xs = undefined
            }
        },

    }
}
</script>

<style lang="scss" scoped>
.box-container {
  min-height: 38px;
  //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  &.selected {
    border: 1px solid #409eff;
  }
  .form-widget-list {
    min-height: 46px;
  }

  .grid-col-action {
    position: absolute;
    bottom: 0;
    right: -2px;
    height: 28px;
    line-height: 28px;
    background: $--color-primary;
    z-index: 999;

    i {
      font-size: 14px;
      color: #fff;
      margin: 0 5px;
      cursor: pointer;
    }
  }

  .grid-col-handler {
    position: absolute;
    top: -2px;
    left: -2px;
    height: 22px;
    line-height: 22px;
    background: $--color-primary;
    z-index: 9;

    i {
      font-size: 14px;
      font-style: normal;
      color: #fff;
      margin: 4px;
      cursor: default;
    }
  }
}
</style>
